<template>
<!-- 引擎下载 -->
  <div class="produc">
    <div class="produc-banner"></div>
     <div class="container flex-between m40">
      <div class="navigation">
            <div class="navigation-heard">我们的产品</div>
            <ul>
                <li @click="change(4)" :class="isActive==4? 'atv':''"><span>GEEM2引擎程序</span></li>
                <li @click="change(5)" :class="isActive==5? 'atv':''"><span>商业游戏网关</span></li>
                <li @click="change(6)" :class="isActive==6? 'atv':''"><span>配套工具下载</span></li>
            </ul>
      </div>
      <div class="voyage">
        <div class="voyage-header flex-between">
            <span v-if="isActive==4">GEEM2引擎程序</span>
            <span v-if="isActive==5">商业游戏网关</span>
            <span v-if="isActive==6">配套工具下载</span>
        </div>
        <el-skeleton :rows="30" animated  v-if="applications.length<=0" />
        <div v-for="(item, i) in applications"  :key="i"  class="voyage-box flex-between" >
          <div class="voyage-box-img">
              <router-link target="_blank"  :to="{path:'/details',query: {id: item.id}}">
                  <img src="../assets/static/38.png">
              </router-link>
          </div>
          <div class="voyage-box-info">
              <h2 class="notice-title">{{ item.title }}</h2>
              <div class="infor-box">
                  <p class="infor" v-html="item.simpleTxt"></p>
              </div>
              <p class="time flex-between-center">
                   <span>发布时间：{{item.addTime}}</span>
                   <span>
                      <router-link target="_blank"  class="lookbut" :to="{path:'/details',query: {id: item.id}}">查看详情</router-link>
                      <a target="_blank" class="dowbut" :href="item.downUrl">立即下载</a>
                   </span>
                  
              </p>
          </div>
          
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../api/index";
export default {
  name: "download",
  data() {
    return {
      applications: "",
      isActive: ''  
    };
  },

  mounted() {
    this. change(4)
  },
  methods: {
    change(e) {
      this.applications = [];
      api.querybytype({ type:e}).then((res) => {
        this.applications = res.data.data.list;
        this.isActive = e
      }); 
    
    },

  },
};
</script>

